<template >
  <div class="container">
    <v-t :topHeaderList="topHeaderList"></v-t>
    <ul>
      <li>VUE3: {{getterAll }}</li>
      <li>我是vuex中的myLoveList:{{$store.state.home.myLoveList.length ? $store.state.home.myLoveList : "空"}}</li>
      <li>
        <el-button type="success" @click="changemyLoveList">改变myLoveList</el-button>
      </li>
      <li>
        <el-button type="success" @click="clearmyLoveList">置空myLoveList</el-button>
      </li>
      <li>我是vuex中的myName:{{$store.state.home.myName}}</li>
      <li>
        <el-button type="success" @click="changemyName">改变myName</el-button>
      </li>
      <li>我是vuex中的myRuning:{{$store.state.home.myRuning}}</li>
      <li>
        <el-button type="success" @click="changemyRuning">改变myRuning</el-button>
      </li>
      <li>{{$store.getters.getAll}}</li>
    </ul>
  </div>
</template>
<script>
import vT from "./topheader.vue";
import { computed } from "vue";
//从vuex中解构出来store
import { useStore } from "vuex";
export default {
  components: { vT },
  setup(props) {
    let topHeaderList = [
      { name: "首页", path: "" },
      { name: "用户管理", path: "" },
      { name: "用户信息", path: "/home/userinfo" }
    ];
    let store = useStore();
    let getterAll = computed(() => store.getters["home/getAll"] + "1111111111");
    let num = 0;
    const changemyLoveList = () => {
      store.commit("home/addMyLoveList", num);
      num++;
    };
    changemyLoveList();
    const clearmyLoveList = () => {
      store.commit("home/clearMyLoveList");
      num = 0;
    };
    clearmyLoveList();
    let nameList = [
      "周杰伦",
      "刘德华",
      "张学友",
      "陈奕迅",
      "成龙",
      "张学良",
      "秦始皇",
      "周深",
      "王娜"
    ];
    const changemyName = () => {
      store.dispatch(
        "home/setTimeoutChangeMyName",
        nameList[Math.floor(Math.random() * nameList.length)]
      );
    };
    changemyName();
    const changemyRuning = () => {
      store.commit("home/changeMyRuning");
    };
    changemyRuning();
    return {
      changemyLoveList,
      clearmyLoveList,
      changemyName,
      changemyRuning,
      getterAll,
      topHeaderList
    };
  }
};
</script>
<style lang="less" scoped>
.container {
  ul {
    li {
      line-height: 60px;
      font-size: 30px;
    }
  }
  img {
    width: 100px;
  }
}
</style>